import { getSearchHot, getSearchSeggest, getSearchResult } from '../../service/api_search'
import debounce from '../../utils/debounce'
const getDebounceGetSuggest = debounce(getSearchSeggest,500,true)
Page({
    data: {
        // 热词
        hotKeyWords:[],
        // 关键字
        searchValue:'',
        // 建议歌曲
        suggestSongs:[],
        // 建议nodes
        sugeestSongsNodes:[],
        // 搜索结果
        searchResultSongs:[]
    },
    onLoad: function (options) {
        this.getPageData()
    },
    // 获取页面数据
    getPageData(){
        getSearchHot().then(res=>{
            this.setData({
                hotKeyWords:res.result.hots
            })
        })
    },
    // 事件处理
    handelSearchChange(event){
        const searchValue = event.detail
        this.setData({searchValue})
        // 删除搜索框内容是需要显示联想
        this.setData({searchResultSongs:[]})
        // 输入框为空时的逻辑判断
        if(!searchValue.length){
            this.setData({suggestSongs:[]})
            // 搜索内容为空时，取消网络请求发送 
            getDebounceGetSuggest.cancel()
            return
        }
        getDebounceGetSuggest(searchValue).then(res=>{
            const suggestSongs = res.result.allMatch
            this.setData({ suggestSongs })

            // 如果没有搜索建议直接返回
            if(!suggestSongs) return

            const sugeestKeyWords = suggestSongs.map(item=>item.keyword)
            const sugeestSongsNodes = []
            for(const keyword of sugeestKeyWords) {
                const nodes = []
                // 判断字符串是否以什么开头
                if(keyword.toUpperCase().startsWith((searchValue.toUpperCase()))) {
                    const key1 = keyword.slice(0,searchValue.length)
                    const node1 = {
                        name:'span',
                        attrs:{style:'color:#29ce8d'},
                        children:[{type:'text',text:key1}]
                    }
                    nodes.push(node1)
                    const key2 = keyword.slice(searchValue.length)
                    const node2 = {
                        name:'span',
                        attrs:{style:'color:#000000'},
                        children:[{type:'text',text:key2}]
                    }
                    nodes.push(node2)
                }else{
                    const node = {
                        name:'span',
                        attrs:{style:'color:#000000'},
                        children:[{type:'text',text:keyword}]
                    }
                    nodes.push(node)
                }
                sugeestSongsNodes.push(nodes)
            }
            this.setData({sugeestSongsNodes})
        })
    },

    // 点击回车搜索
    handleSearchAction(){
        const searchValue = this.data.searchValue
        getSearchResult(searchValue).then(res=>{
            this.setData({searchResultSongs:res.result.songs})
        })
    },
    // 点击搜索建议列表单项
    handleSuggestItemClick(event){

        const index = event.currentTarget.dataset.index
        const keyword = this.data.suggestSongs[index].keyword
        this.setData({searchValue:keyword})

        this.handleSearchAction()
    },
    // 点击建议搜索关键字
    handleTagItemClick(event){
        const keyword = event.currentTarget.dataset.item
        this.setData({searchValue:keyword})
        this.handleSearchAction()
    }
})